<template>
  <div class="partUpdateExceptionLogWrap h100" style="height:calc(100% - 50px)">
    <part-update-exception-log-search v-if="isSearch" :queryParams="queryParams" @handleSearch="refreshData" @changTaskName="setTaskName">
    </part-update-exception-log-search>
    <div class="partUpdateExceptionLogList commonTableSty" >
      <s-table
        :columns="columns"
        :data="loadData"
        :page-size="20"
        :scrollX="900"
        rowKey="id"
        ref="table"
        class="h100">
        <!-- 任务名称 -->
        <template #campaignName="text, record">
          <table-ellipsis
            :text="text + (record.taskType === 10 ? '[' + $t('cycleTestTask') + ']' : '') || '-'"
          ></table-ellipsis>
        </template>
        <!-- 上报类型 -->
        <template #messageType="text">
          <table-ellipsis :text="clientLogTypeDictCodeObj[text] || '-'"></table-ellipsis>
        </template>
        <!-- 上报时间 -->
        <template #reportingTime="text">
          <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
        </template>
        <!-- 下载 -->
        <template slot="action" slot-scope="text, record">
          <a @click="downloadFile(record.file)" v-if="record.file && record.file.id && record.messageType == 'otadiagnose'">
            <auth-button
             :auth="statisticsPerms.monitor.fotalogDownload"
             type="primary"
             :ghost="true"
             size="small"
             ><i class="iconfont icon-xiazai"/>下载诊断失败报文</auth-button>
          </a>
          <a @click="downloadFile(record.file)" v-if="record.file && record.file.id && record.messageType == 'otaupgrade'">
          <auth-button
             :auth="statisticsPerms.monitor.fotalogDownload"
             type="primary"
             :ghost="true"
             size="small"
             ><i class="iconfont icon-xiazai"/>下载升级失败报文</auth-button>
          </a>
          <a @click="downloadFile(record.file)" v-if="record.file && record.file.id && record.messageType == 'fotalogFile'">
          <auth-button
             :auth="statisticsPerms.monitor.fotalogDownload"
             type="primary"
             :ghost="true"
             size="small"
             ><i class="iconfont icon-xiazai"/>下载车云交互失败报文</auth-button>
          </a>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a @click="downloadFile(record.file)" v-if="record.file && record.file.id">
            <auth-button
             :auth="statisticsPerms.monitor.fotalogDownload"
             type="primary"
             :ghost="true"
             size="small"
             ><i class="iconfont icon-xiazai"/>下载日志</auth-button>
          </a>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import PartUpdateExceptionLogSearch from '@/views/components/PartUpdateExceptionLog/PartUpdateExceptionLogSearch.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import PartSoftSelect from '@/views/components/PartSoftSelect'
import logApi from '@/api/modules/log'
import fileApi from '@/api/modules/system/fileUpload'
import { downloadBlobFile } from '@/utils/functions'
import { STable } from '@/components'
import { exceptionLogTbColumns, carExceptionLogTbColumns } from './config/list'
import AuthText from '@/components/AuthText'
import { statisticsPerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'
import moment from 'moment'

export default {
  components: {
    TableEllipsis,
    PartSoftSelect,
    STable,
    PartUpdateExceptionLogSearch,
    AuthText,
    AuthButton
  },
  props: {
    // 适配其他组件
    compt:{
      type: String,
      default: ''
    },
    defaultQuery: {
      type: Object,
      default () {
        return {}
      }
    },
    isSearch: {
      type: Boolean,
      default: false
    },
    time: {
      type: Number,
      default: 1592580
    }
  },
  computed: {
    strategySceneTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('strategySceneTypeDictCode')
    },
    clientLogTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('clientLogTypeDictCode')
    }
  },
  data () {
    return {
      logIds:[],
      columns: this.compt=='showCarLog'?carExceptionLogTbColumns: exceptionLogTbColumns,
      queryParams: {},
      pageInfo: {
        pageNo: 1,
        pageSize: 3
      },
      total: 0,
      loadingData: false,
      statisticsPerms
    }
  },
  watch: {
    time: {
      handler () {
        this.$nextTick(() => {
          this.refreshData()
        })
      }
    }
  },
  created () {
    this.queryParams.vin = this.defaultQuery.vin
    this.queryParams.taskName = this.defaultQuery.taskName
    this.getPageDicsData()
  },
  methods: {
    downloadAllFile (packageFile) {
      if(this.logIds.length < 1){
        return
      }
      this.$emit('downloadType',true)
      this.$api.downloadZip({ ids: this.logIds.join(',') }).then((res) => {
        downloadBlobFile( res, `${moment().format('YYYY-MM-DD HH:mm:ss')}.zip` )
      }).finally(()=>{
        this.$emit('downloadType',false)
      })
    },
    resize(){
      this.$refs.table.getDomHeight()
    },
    loadData (parameter) {
      if (!this.defaultQuery) {
        return
      }
      const apiPromise = (this.compt=='showCarLog'?logApi.getClientLog({ ...this.defaultQuery, ...this.queryParams, ...parameter }):logApi.getFotaLog({ ...this.defaultQuery, ...this.queryParams, ...parameter }))
      return new Promise((resolve) => {
        return apiPromise.then((res) => {
          if (res.data) {
            res.data.forEach(item=>{
              this.logIds.push(item.fileId)
            })
          }
          resolve(res);
        });
      });
    },
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.table.loadData(obj)
    },
    downloadFile (file) {
      fileApi.downloadErrorLog({ id: file.id }).then((res) => {
        downloadBlobFile(res, file.name)
      })
    },
    getPageDicsData () {
      ;['getStrategySceneTypeDictCodeData', 'getClientLogTypeDictCodeData'].forEach((method) => {
        this.$store.dispatch(method)
      })
    },
    setTaskName (val) {
      this.queryParams.taskName = val
    }
  }
}
</script>
<style lang="less" scoped>
.partUpdateExceptionLogWrap {
  display: flex;
  flex-direction: column;
  .partUpdateExceptionLogList {
    flex: 1 0 0;
    overflow: auto;
    .exceptionLogItem {
      display: flex;
      padding: 5px 0;
    }
    .exceptionLogItemTitle {
      font-weight: 600;
      width: 100px;
      flex: none;
      font-size: 0.9em;
    }
    .exceptionLogItemValue {
      flex: 1 0 0;
    }
  }
}

::v-deep .ant-table-thead {
  tr {
    th {
       padding: 10px !important;
    }
  } 
}
</style>
